<script setup>
import {ref, onMounted } from 'vue'
import _axios from '@/utils/myAxios.js'
import { ElMessage } from 'element-plus'
let myArticle = ref([])
let current = ref(1)
let size = ref(10)
let total = ref(1)
let hasMore = ref(true)
async function getMyArticle(){
    let resp = await _axios.get('/api/article/myArticle',{
        params: {
            current: current.value,
            size: size.value
        }
    })
    if(resp.data.code === 200){
        resp.data.data.rows.forEach(item => {
            myArticle.value.push(item)
        })
        total.value = resp.data.data.total
        if (total.value <= myArticle.value.length) {
            hasMore.value = false
        } else {
            current.value += 10
            hasMore.value = true
        }
        
    }
}
async function updateViewCount(id) {
    let resp = await _axios.put(`/api/article/updateViewCount/${id}`)
    if (resp.data.code !== 200) {
        ElMessage({
            showClose: true,
            message: resp.data.message,
            type: 'error',
            appendTo: "#app",
        })
    }
}
onMounted(() =>{
    getMyArticle()
})
</script>

<template>
<div class="mine-content">
        <ul>
            <li class="card" v-for="article in myArticle" :key="article.id">
                <div>
                    <div class="mine-content-hd">
                        <a :href="'#/detailArticle?articleId=' + article.id" @click="updateViewCount(article.id)"
                            target="_blank">
                            <span>{{ article.title }}</span>
                        </a>
                        <p><el-icon>
                                <Avatar />
                            </el-icon>发表于&nbsp;<el-icon>
                                <Clock />
                            </el-icon>{{ article.createTime }}&nbsp;<el-icon>
                                <View />
                            </el-icon>{{ article.viewCount }}次&nbsp;围观</p>
                    </div>
                    <el-button type="success" plain v-if="article.categoryName">
                        <el-icon>
                            <Discount />
                        </el-icon>分类&nbsp;<span style="font-weight: 600;">{{ article.categoryName }}</span></el-button>
                    <div class="mine-content-item">
                        <p>{{ article.summary }}</p>
                        <div class="img">
                            <img :src="article.thumbnail">
                        </div>
                    </div>
                </div>
                <div class="mine-content-foot">
                    <a :href="'#/detailArticle?articleId=' + article.id" @click="updateViewCount(article.id)"
                        target="_blank"><el-button type="primary">阅读全文>></el-button></a>
                </div>
            </li>
            <el-button v-if="hasMore" type="primary" style="width:100%;margin-top: 20px"
                @click="getMyArticle()">点击加载更多</el-button>
            <el-button v-else plain type="primary" style="width:100%;margin-top: 20px">暂无更多数据</el-button>
        </ul>
    </div>
</template>

<style scoped>
.mine-content ul {
    padding: 0;
    width: 100%;
}

.mine-content ul li {
    list-style-type: none;
    padding: 20px 0;
}

.mine-content-hd {
    margin-bottom: 30px;
    text-align: center;
}


.mine-content-hd span {
    font-size: 24px;
    font-weight: 600;
    margin-left: 5px;
    color: #000;
}

.mine-content-hd p {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mine-content-item {
    padding: 20px;
}

.mine-content-item .img {
    text-align: center;
    margin-bottom: 5px;
}

.mine-content-item .img img {
    width: 70%;
}

.mine-content-foot {
    text-align: center;
}
</style>